<script type="text/javascript">
var statuslist = [{
    statusid: '2',
    name: '禁用'
}, {
    statusid: '1',
    name: '启用'
}];
var URL = "/rbac/user";
$(function() {
    //用户列表
    $("#datagrid").datagrid({
        // title:'用户列表',
        url: URL + '/index',
        header:'#header',
        fit:true,
        method: 'POST',
        pagination: true,
        fitColumns: true,
        striped: true,
        rownumbers: true,
        singleSelect: true,
        idField: 'Id',
        pagination: true,
        pageSize: 20,
        pageList: [10, 20, 30, 50, 100],
        columns: [
            [{
                field: 'Id',
                title: 'ID',
                sortable: true
            }, {
                field: 'Username',
                title: '用户名',
                sortable: true
            }, {
                field: 'Nickname',
                title: '昵称',
                align: 'center',
                editor: 'text'
            }, {
                field: 'Email',
                title: 'Email',
                align: 'center',
                editor: 'text'
            }, {
                field: 'Remark',
                title: '备注',
                width: 100,
                align: 'center',
                editor: 'text'
            }, {
                field: 'Lastlogintime',
                title: '上次登录时间',
                align: 'center',
                sortable: true,
                formatter: function(value, row, index) {
                    if (value) return phpjs.date("Y-m-d H:i:s", phpjs.strtotime(value));
                    return value;
                }
            }, {
                field: 'Lastip',
                title: '上次登录IP',
                align: 'center'
            }, {
                field: 'Logincount',
                title: '登录次数',
                align: 'center',
                sortable: true
            }, {
                field: 'Createtime',
                title: ' 创建时间',
                align: 'center',
                sortable: true,
                formatter: function(value, row, index) {
                    if (value) return phpjs.date("Y-m-d H:i:s", phpjs.strtotime(value));
                    return value;
                }
            }, {
                field: 'Status',
                title: '状态',
                width: 100,
                align: 'center',
                sortable: true,
                formatter: function(value) {
                    for (var i = 0; i < statuslist.length; i++) {
                        if (statuslist[i].statusid == value) return statuslist[i].name;
                    }
                    return value;
                },
                editor: {
                    type: 'combobox',
                    options: {
                        valueField: 'statusid',
                        textField: 'name',
                        data: statuslist,
                        required: true
                    }
                }
            }]
        ],
        onAfterEdit: function(index, data, changes) {
            if (vac.isEmpty(changes)) {
                return;
            }
            changes.Id = data.Id;
            vac.ajax(URL + '/UpdateUser', changes, 'POST', function(r) {
                if (!r.status) {
                    vac.alert(r.info);
                } else {
                    $("#datagrid").datagrid("reload");
                }
            })
        },
        onDblClickRow: function(index, row) {
            editrow();
        },
        onRowContextMenu: function(e, index, row) {
            e.preventDefault();
            $(this).datagrid("selectRow", index);
            $('#mm').menu('show', {
                left: e.clientX,
                top: e.clientY
            });
        },
        onHeaderContextMenu: function(e, field) {
            e.preventDefault();
            $('#mm1').menu('show', {
                left: e.clientX,
                top: e.clientY
            });
        }
    });
    //创建添加用户窗口
    $("#dialog").dialog({
        modal: true,
        resizable: true,
        top: 150,
        closed: true,
        buttons: [{
            text: '保存',
            iconCls: 'icon-save',
            handler: function() {
                $("#form1").form('submit', {
                    url: URL + '/AddUser',
                    onSubmit: function() {
                        return $("#form1").form('validate');
                    },
                    success: function(r) {
                        var r = $.parseJSON(r);
                        if (r.status) {
                            $("#dialog").dialog("close");
                            $("#datagrid").datagrid('reload');
                        } else {
                            vac.alert(r.info);
                        }
                    }
                });
            }
        }, {
            text: '取消',
            iconCls: 'icon-cancel',
            handler: function() {
                $("#dialog").dialog("close");
            }
        }]
    });
    //创建修改密码窗口
    $("#dialog2").dialog({
        modal: true,
        resizable: true,
        top: 150,
        closed: true,
        buttons: [{
            text: '保存',
            iconCls: 'icon-save',
            handler: function() {
                var selectedRow = $("#datagrid").datagrid('getSelected');
                var password = $('#password').val();
                vac.ajax(URL + '/UpdateUserPasswd', {
                    Id: selectedRow.Id,
                    Password: password
                }, 'post', function(r) {
                    if (r.status) {
                        $("#dialog2").dialog("close");
                    } else {
                        vac.alert(r.info);
                    }
                })
            }
        }, {
            text: '取消',
            iconCls: 'icon-cancel',
            handler: function() {
                $("#dialog2").dialog("close");
            }
        }]
    });

})

function editrow() {
    if (!$("#datagrid").datagrid("getSelected")) {
        vac.alert("请选择要编辑的行");
        return;
    }
    $('#datagrid').datagrid('beginEdit', vac.getindex("datagrid"));
}

function saverow(index) {
    if (!$("#datagrid").datagrid("getSelected")) {
        vac.alert("请选择要保存的行");
        return;
    }
    $('#datagrid').datagrid('endEdit', vac.getindex("datagrid"));
}
//取消
function cancelrow() {
    if (!$("#datagrid").datagrid("getSelected")) {
        vac.alert("请选择要取消的行");
        return;
    }
    $("#datagrid").datagrid("cancelEdit", vac.getindex("datagrid"));
}
//刷新
function reloadrow() {
    $("#datagrid").datagrid("reload");
}

//添加用户弹窗
function addrow() {
    $("#dialog").dialog('open');
    $("#form1").form('clear');
}

//编辑用户密码
function updateuserpassword() {
    var dg = $("#datagrid")
    var selectedRow = dg.datagrid('getSelected');
    if (selectedRow == null) {
        vac.alert("请选择用户");
        return;
    }
    $("#dialog2").dialog('open');
    $("form2").form('load', {
        password: ''
    });
}

//删除
function delrow() {
    $.messager.confirm('Confirm', '你确定要删除?', function(r) {
        if (r) {
            var row = $("#datagrid").datagrid("getSelected");
            if (!row) {
                vac.alert("请选择要删除的行");
                return;
            }
            vac.ajax(URL + '/DelUser', {
                Id: row.Id
            }, 'POST', function(r) {
                if (r.status) {
                    $("#datagrid").datagrid('reload');
                } else {
                    vac.alert(r.info);
                }
            })
        }
    });
}
</script>
<table id="datagrid"></table>
<div id="header">
        <div class="m-toolbar">
            <div class="m-title"></div>
            <div  class="m-left">
            <a href="#" icon='icon-add' plain="true" onclick="addrow()" class="easyui-linkbutton">新增</a>
            <a href="#" icon='icon-edit' plain="true" onclick="editrow()" class="easyui-linkbutton">编辑</a>
            <a href="#" icon='icon-save' plain="true" onclick="saverow()" class="easyui-linkbutton">保存</a>
            <a href="#" icon='icon-cancel' plain="true" onclick="delrow()" class="easyui-linkbutton">删除</a>
            <a href="#" icon='icon-reload' plain="true" onclick="reloadrow()" class="easyui-linkbutton">刷新</a>
            <a href="#" icon='icon-edit' plain="true" onclick="updateuserpassword()" class="easyui-linkbutton">修改用户密码</a>
            </div>
        </div>
</div>
<!--表格内的右键菜单-->
<div id="mm" class="easyui-menu" style="width:120px;display: none">
    <div iconCls='icon-add' onclick="addrow()">新增</div>
    <div iconCls="icon-edit" onclick="editrow()">编辑</div>
    <div iconCls='icon-save' onclick="saverow()">保存</div>
    <div iconCls='icon-cancel' onclick="cancelrow()">取消</div>
    <div iconCls='icon-edit' onclick="updateuserpassword()">修改密码</div>
    <div class="menu-sep"></div>
    <div iconCls='icon-cancel' onclick="delrow()">删除</div>
    <div iconCls='icon-reload' onclick="reloadrow()">刷新</div>
    <div class="menu-sep"></div>
    <div>Exit</div>
</div>
<!--表头的右键菜单-->
<div id="mm1" class="easyui-menu" style="width:120px;display: none">
    <div icon='icon-add' onclick="addrow()">新增</div>
</div>
<div id="dialog" title="添加用户" style="width:400px;height:400px;">
    <div style="padding:20px 20px 40px 80px;">
        <form id="form1" method="post">
            <table>
                <tr>
                    <td>用户名：</td>
                    <td>
                        <input name="Username" class="easyui-validatebox" required="true" validType='account[6,20]'/>
                    </td>
                </tr>
                <tr>
                    <td>昵称：</td>
                    <td>
                        <input name="Nickname" class="easyui-validatebox" required="true" validType="inputlen[2,20]"  />
                    </td>
                </tr>
                <tr>
                    <td>密码：</td>
                    <td>
                        <input id="passwd" name="Password" type="password" class="easyui-validatebox" required="true" validType="password[6,20]" />
                    </td>
                </tr>
                <tr>
                    <td>重复密码：</td>
                    <td>
                        <input name="Repassword" type="password" class="easyui-validatebox" required="true" validType="equals['#passwd']" />
                    </td>
                </tr>
                <tr>
                    <td>Email：</td>
                    <td>
                        <input name="Email" class="easyui-validatebox" validType="email" />
                    </td>
                </tr>
                <tr>
                    <td>状态：</td>
                    <td>
                        <select name="Status" style="width:153px;" class="easyui-combobox " editable="false" required="true">
                            <option value="1">启用</option>
                            <option value="2">禁用</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>备注：</td>
                    <td>
                        <textarea name="Remark" class="easyui-validatebox" validType="length[0,200]"></textarea>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>
<div id="dialog2" title="修改用户密码" style="width:400px;height:200px;">
    <div style="padding:20px 20px 40px 80px;">
        <table>
            <tr>
                <td>密码：</td>
                <td>
                    <input name="Password" type="password" id="password" class="easyui-validatebox" required="true" validType="password[6,20]" />
                </td>
            </tr>
        </table>
    </div>
</div>
